<template>
  <div class="dept-container">
    <!-- 操作工具栏 -->
    <div class="operation-bar">
      <el-button type="primary" @click="handleCreate">
        <el-icon><plus /></el-icon> 新增部门
      </el-button>
      <el-input
        v-model="searchKey"
        placeholder="输入部门名称搜索"
        style="width: 240px; margin-left: 12px"
        clearable
      >
        <template #prefix>
          <el-icon><search /></el-icon>
        </template>
      </el-input>
    </div>

    <!-- 部门表格 -->
    <el-table
      :data="filteredDepts"
      border
      stripe
      style="width: 100%; margin-top: 16px"
      v-loading="loading"
    >
      <el-table-column prop="deptCode" label="部门编码" width="180" />
      <el-table-column prop="deptName" label="部门名称" width="240" />
      <el-table-column prop="leader" label="负责人" width="120" />
      <el-table-column prop="phone" label="联系电话" width="150" />
      <el-table-column prop="status" label="状态" width="100">
        <template #default="{ row }">
          <el-tag :type="row.status ? 'success' : 'danger'">
            {{ row.status ? "启用" : "停用" }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="180" />
      <el-table-column label="操作" fixed="right" width="180">
        <template #default="{ row }">
          <el-button size="small" @click="handleEdit(row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <div class="pagination-wrapper">
      <el-pagination
        v-model:current-page="currentPage"
        :page-size="pageSize"
        :total="total"
        layout="total, prev, pager, next, jumper"
      />
    </div>

    <!-- 部门表单对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="formTitle"
      width="500px"
      destroy-on-close
    >
      <el-form
        :model="formData"
        :rules="formRules"
        ref="deptForm"
        label-width="80px"
      >
        <el-form-item label="部门名称" prop="deptName">
          <el-input v-model="formData.deptName" />
        </el-form-item>
        <el-form-item label="部门编码" prop="deptCode">
          <el-input v-model="formData.deptCode" />
        </el-form-item>
        <el-form-item label="负责人" prop="leader">
          <el-input v-model="formData.leader" />
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="formData.phone" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-switch v-model="formData.status" />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">确认</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { Search, Plus } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 模拟数据
const mockData = [
  {
    id: 1,
    deptCode: 'DEPT001',
    deptName: '技术研发部',
    leader: '张三',
    phone: '13800138000',
    status: true,
    createTime: '2023-08-01 10:00:00'
  }
]

// 表格数据
const deptList = ref([...mockData])
const loading = ref(false)
const searchKey = ref('')
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(1)

// 对话框相关
const dialogVisible = ref(false)
const formData = ref({
  id: null,
  deptName: '',
  deptCode: '',
  leader: '',
  phone: '',
  status: true
})

const formTitle = computed(() => 
  formData.value.id ? '编辑部门' : '新增部门'
)

// 表单验证规则
const formRules = {
  deptName: [
    { required: true, message: '请输入部门名称', trigger: 'blur' }
  ],
  deptCode: [
    { required: true, message: '请输入部门编码', trigger: 'blur' }
  ]
}

// 过滤后的部门数据
const filteredDepts = computed(() => {
  return deptList.value.filter(item => 
    item.deptName.includes(searchKey.value)
  )
})

// 打开创建对话框
const handleCreate = () => {
  formData.value = {
    id: null,
    deptName: '',
    deptCode: '',
    leader: '',
    phone: '',
    status: true
  }
  dialogVisible.value = true
}

// 打开编辑对话框
const handleEdit = (row) => {
  formData.value = { ...row }
  dialogVisible.value = true
}

// 提交表单
const submitForm = async () => {
  try {
    await ElMessageBox.confirm('确认提交部门信息吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    // 这里添加实际提交逻辑
    if (!formData.value.id) {
      formData.value.id = Date.now()
      deptList.value.push(formData.value)
    } else {
      const index = deptList.value.findIndex(item => item.id === formData.value.id)
      deptList.value.splice(index, 1, formData.value)
    }
    
    dialogVisible.value = false
    ElMessage.success('操作成功')
  } catch (error) {
    console.log('取消操作')
  }
}

// 删除部门
const handleDelete = async (row) => {
  try {
    await ElMessageBox.confirm('确认删除该部门吗？', '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'error'
    })
    
    const index = deptList.value.findIndex(item => item.id === row.id)
    deptList.value.splice(index, 1)
    ElMessage.success('删除成功')
  } catch (error) {
    console.log('取消删除')
  }
}

onMounted(() => {
  // 这里可以添加数据获取逻辑
})
</script>

<style scoped>
.dept-container {
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}

.operation-bar {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.pagination-wrapper {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>